<template>
  <div class="gridView">
    <img class="leftTopImg" src="./assets/leftTopImg.png" alt="">
    <img class="iconLeftBottom" src="./assets/icon_left_bottom.png" alt="">
    <img class="iconRightTop" src="./assets/icon_right_top.png" alt="">
    <div class="gridViewInner">

    </div>
  </div>
</template>

<script>

export default {
  name: "gridView"
}
</script>

<style lang="scss" scoped>
.gridView {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 80px;
  min-width: 250px;
  bottom: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;

  .leftTopImg {
    width: 131px;
    height: 13px;
    flex-shrink: 0;
  }

  .iconLeftBottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 39px;
    height: 116px;
    z-index: 100;
  }

  .iconRightTop {
    position: absolute;
    right: 0;
    top: 13px;
    width: 10px;
    height: 11px;
    z-index: 100;
  }

  .gridViewInner {
    background: linear-gradient(182deg, #002C5B 0%, #02070B 100%);
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
